<template>
    <div class="authority">
        <div class="gva-search-box">
            <el-form ref="searchForm" :inline="true">
                <el-form-item label="名称">
                    <el-input v-model="searchInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="编码">
                    <el-input v-model="searchInfo.no"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="onSubmit">
                        查询
                    </el-button>
                    <el-button icon="refresh" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box unit">
            <div class="gva-btn-list">
                <el-button type="primary" icon="plus" @click="addUnit">新增</el-button>
                <el-button type="primary" icon="download" @click="exportExcel">导出</el-button>
            </div>
            <el-table :data="tableData" row-key="id">
                <el-table-column align="left" label="分类名称" prop="name"></el-table-column>
                <el-table-column align="left" label="分类编码" prop="no"></el-table-column>
                <el-table-column align="left" fixed="right" label="操作" min-width="160">
                    <template #default="scope">
                        <el-button type="primary" link icon="plus" @click="addUnit(scope.row)">
                            新增下级
                        </el-button>
                        <el-button type="primary" link icon="edit" @click="editUnit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" link icon="delete" @click="delUnit(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="gva-pagination">
                <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total"
                    layout="prev, pager, next" @current-change="handleCurrentChange" />
            </div>
        </div>
        <el-drawer v-model="dialogFormVisible" :size="appStore.drawerSize" :before-close="handleClose"
            :show-close="false">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">{{ dialogTitle }}</span>
                    <div>
                        <el-button @click="closeDialog"> 取 消 </el-button>
                        <el-button type="primary" @click="enterDialog"> 确 定 </el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="dialogFormVisible" ref="unitForm" label-width="150" :model="form" :rules="rules">
                <!-- <el-form-item label="上级单位" prop="name">
            <el-input v-model="form.parentName" disabled/>
          </el-form-item> -->
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="分类编码" prop="no">
                    <el-input v-model="form.no" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script setup>
import {
    optionList,
    optionEdit,
    deleteOption,
    optionAdd,
    checkOptionExport
} from '@/api/yewuguanli'

import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
    name: 'Unit'
})
const appStore = useAppStore()
const defaultProps = {
    children: 'children',
    label: 'name',
}

const form = ref({
    name:'',
    no:'',
    parentId:0
})

const searchInfo = ref({
   name:'',
    no:''
})
const userStore = useUserStore()

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)
const userVisible = ref(false)
const rules = reactive({
    name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
    no: [{ required: true, message: '请输入分类编码', trigger: 'blur' }],
})

const unitForm = ref(null)

const pids = ref([])
const props1 = {
    checkStrictly: true,
    label: 'name',
    value: 'name'
}
const initForm = () => {
    unitForm.value.resetFields()
    form.value = {
        name:'',
        no:'',
        parentId:0
    }
    pids.value = []
}

const isEdit = ref(false)
const dialogTitle = ref('新增')
const addUnit = (row) => {
    if (row) {
        form.value.parentId = row.id
    }
    dialogTitle.value = '新增'
    isEdit.value = false
    dialogFormVisible.value = true
}
const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
}

const handleClose = (done) => {
    initForm()
    done()
}

const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}
const tableData = ref([])
// 查询
const getTableData = async () => {
    const res = await optionList({...searchInfo.value})
    if (res.code == 200) {
        tableData.value = res.result
        //total.value = res.result.length
    }
}
getTableData()
onMounted(() => {

})
const enterDialog = async () => {
    unitForm.value.validate(async (valid) => {
        if (valid) {
            let res
            if (isEdit.value) {
                res = await optionEdit(form.value)
            } else {
                res = await optionAdd(form.value)
            }
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: isEdit.value ? '编辑成功' : '添加成功!'
                })
                getTableData()
            }
            initForm()
            dialogFormVisible.value = false
        }
    })
}

const delUnit = (row) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await deleteOption(row.id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            getTableData()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

const editUnit = async (row) => {
    form.value.parentId = row.id
    isEdit.value = true
    dialogTitle.value = '编辑'
    form.value = JSON.parse(JSON.stringify(row))
    form.value.checkOptionId = form.value.id
    dialogFormVisible.value = true
}
const cascader = ref(null)
const areaChange = (val) => {
  
    //form.value.regionId = cascader.value.getCheckedNodes()[0].data.id
}
const onSubmit = () => {
    page.value = 1
    getTableData()
}
const searchPids = ref([])
const onReset = () => {
    page.value = 1
    searchInfo.value = {
        province: '',
        city: '',
        district: '',
        town: ''
    }
    searchPids.value = []
    getTableData()
}
function exportExcel(){
    checkOptionExport(searchInfo.value).then(res=>{
        if(res.code==200){
           window.open(res.result)
        }
    })
}
</script>

<style lang="scss">
.flex {
    .area {
        flex: 2;
        background-color: #fff;
        margin: 0.5rem 20px 0.5rem 0;
    }

    .unit {
        flex: 4;
    }
}

.ant-alert-info {
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    color: #1890ff;
    padding: 5px;

    .anticon {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}
</style>